import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { Alert, message } from 'antd';
import React, { useState } from 'react';
// @ts-ignore
import { FormattedMessage, useHistory } from 'umi';

import useLogin from '@/hooks/useLogin';
import LogoPng from '../../../public/images/logo.png';

import styles from './index.less';

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login: React.FC = () => {
  const [userLoginState, setUserLoginState] = useState<string>('');
  const history = useHistory();
  const { login } = useLogin();

  const handleSubmit = async (values: API.LoginParams) => {
    history.push('/welcome');
    return;
    const res = await login(values);
    setUserLoginState(res ? '' : 'error');
    if (res) {
      /** 此方法会跳转到 redirect 参数所在的位置 */
      if (!history) return;
      // @ts-ignore
      const { query } = history.location;
      const { redirect } = query as { redirect: string };
      setTimeout(() => history.push(redirect || '/'));
    } else {
      message.error('登录失败，请重试！');
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <LoginForm
          className="login-form"
          // logo={<img alt="logo" src="/logo.png" />}
          logo={<img alt="logo" src={LogoPng} />}
          title="券管理平台"
          subTitle={<div />}
          initialValues={{
            autoLogin: true,
            // userName: 'admin',
            // password: '123456',
          }}
          onFinish={async (values) => {
            await handleSubmit(values as API.LoginParams);
          }}
        >
          <ProFormText
            name="username"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined className={styles.prefixIcon} />,
            }}
            placeholder="请输入用户名"
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="pages.login.username.required"
                    defaultMessage="请输入用户名!"
                  />
                ),
              },
            ]}
          />
          <ProFormText.Password
            name="pwd"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={styles.prefixIcon} />,
            }}
            placeholder="请输入密码"
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="pages.login.password.required"
                    defaultMessage="请输入密码！"
                  />
                ),
              },
            ]}
          />
          {userLoginState === 'error' && <LoginMessage content="账户或密码错误" />}

          <div
            style={{
              marginBottom: 24,
            }}
          />
        </LoginForm>
      </div>
    </div>
  );
};

export default Login;
